🎨 Notes for Lecture 15: Inline, Internal & External CSS

🧩 Introduction

There are three primary ways to apply CSS to HTML elements:

  • Inline CSS
  • Internal CSS
  • External CSS

🟠 Inline CSS

Definition: Inline CSS ek specific element ke andar directly likha jata hai using the style="" attribute. 

<h2 style="color: antiquewhite; background-color: brown;">About Me</h2>

Note: Inline CSS chhote HTML edits ke liye theek hai, but big projects me ye recommend nahi kiya jata because maintain karna difficult hota hai.

My Short Note: Not recommended for large projects. Editing every element manually is time-consuming.

🟡 Internal CSS

Definition: Internal CSS ek hi HTML page ke multiple elements ko style karne ke liye use hoti hai. Ye <style> tag ke andar hoti hai jo <head> section me likhte hain.

<style>
#internal h1 {
  color: skyblue;
  background-color: darkcyan;
}
</style>

Note: Internal CSS better hoti hai as compared to inline CSS. Ye ek page pe centralized styling provide karti hai. Lekin multiple pages ke liye external CSS zyada better hoti hai.

My Short Note: Easier to manage than inline. Still limited for large projects.

🟢 External CSS

Definition: External CSS ek alag file hoti hai (e.g., style.css) jisko <link> tag se HTML page ke <head> section me attach karte hain. 

<link rel="stylesheet" href="style.css">
/* style.css content */
#external h1 {
  color: red;
  background-color: blue;
}

Note: Ye technique large scale projects ke liye sabse best hoti hai. Aap ek CSS file me changes karke multiple HTML files me design update kar sakte ho.

My Short Note: Best for maintaining reusable styles across multiple pages. Clean and centralized.

⚖️ CSS Priority Order (Precedence)

Order: Inline > Internal > External

Agar same element par tino tarah se style apply ho raha ho, to Inline CSS sabse pehle apply hoti hai, uske baad Internal, aur last me External.

CSS Method Priority
Inline CSS 🔥 Highest
Internal CSS 🔼 Medium
External CSS 🔽 Lowest

📌 Final Summary

CSS Type Used In Best For Maintainability
Inline Inside element Quick fixes ❌ Hard
Internal <head> tag Single-page sites ⚠️ Okay
External Separate CSS file All project files ✅ Best

Hinglish: Is lecture mein humne CSS ke teen tareeke dekhe — Inline, Internal, aur External CSS. Inline CSS ek element ke andar directly likhi jati hai style="" attribute se. Internal CSS ek page ke <head> mein <style> tag ke andar hoti hai, aur External CSS alag file hoti hai jise <link> ke zariye attach karte hain. Inline CSS ki priority sabse zyada hoti hai, fir Internal, fir External. Large projects mein External CSS best hoti hai maintain karne ke liye.

💻 Live Code Preview

If the iframe doesn’t load, click
here to open Lecture 15 Demo in a new tab.

← Back to Lecture Dashboard